<template>
<!--  <div class="canvas" style="opacity: .2">-->
<!--    <iframe frameborder="0" src="../assets/BigScreen/js/UserInfo.html" style="width: 100%; height: 100%"></iframe>-->
<!--  </div>-->
  <div class="loading">
    <div class="loadbox"> <img src="../../assets/BigScreen/picture/loading.gif"> 页面加载中... </div>
  </div>
  <div class="head">
    <h1>智慧养老服务平台</h1>
    <div class="weather">
      <img src="../../assets/BigScreen/picture/weather.png"><span>多云转小雨</span>
      <span id="showTime"></span>
    </div>
    <div class="userInfo" id="userInfo">
      <span v-on:click="jump()">用户实时在线</span>
<!--      <span><a href="userInfo">用户实时在线</a></span>-->

    </div>
  </div>
  <div class="mainbox">
    <ul class="clearfix">
      <li>
        <div class="boxall" style="height: 3.2rem">
          <div class="alltitle">社区动态</div>
          <div class="allnav" ref="echart1"></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: 3.2rem">
          <div class="alltitle">实时指标</div>
          <div class="allnav" ref="echart2"></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: 3.2rem">
          <div style="height:100%; width: 100%;">
            <div class="sy" ref="fb1"></div>
            <div class="sy" ref="fb2"></div>
            <div class="sy" ref="fb3"></div>
          </div>
          <div class="boxfoot">
          </div>
        </div>
      </li>
      <li>
        <div class="bar">
          <div class="barbox">
            <ul class="clearfix">
              <li class="pulll_left counter">12581189</li>
              <li class="pulll_left counter">3912410</li>
            </ul>
          </div>
          <div class="barbox2">
            <ul class="clearfix">
              <li class="pulll_left">2018年总收入情况 </li>
              <li class="pulll_left">2018年总支出情况</li>
            </ul>
          </div>
        </div>
        <div class="map">
          <div class="map1"><img src="../../assets/BigScreen/picture/lbx.png"></div>
          <div class="map2"><img src="../../assets/BigScreen/picture/jt.png"></div>
<!--          <div class="map3"><img src="picture/map.png"></div>-->
          <div class="map4"><MapContainer></MapContainer></div>

        </div>

      </li>
      <li>
        <div class="boxall" style="height:3.4rem">
          <div class="alltitle">预警响应</div>
          <div class="allnav" ref="echart4"></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: 3.2rem">
          <div class="alltitle">预约渠道</div>
          <div class="allnav" ref="echart5"></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: 3rem">
          <div class="alltitle">服务类型分析</div>
          <div class="allnav" ref="echart6"></div>
          <div class="boxfoot"></div>
        </div>
      </li>
    </ul>
  </div>
  <div class="back"></div>
</template>

<script>

import MapContainer from "@/components/MapContainer";
let echarts = require('echarts');

export default {
  name: "BigScreen",
  components: {MapContainer},
  mounted() {
    window.setTimeout(this.loading,600);
    this.fontSizeSet();
    this.echarts_1();
    this.echarts_2();
    this.echarts_4();
    this.echarts_31();
    this.echarts_32();
    this.echarts_33();
    this.echarts_5();
    this.echarts_6();
  },
  methods: {
    jump(){
      window.location.href="userInfo"
    },
    loading(){
      $(".loading").fadeOut()
    },
    fontSizeSet() {
      var whei = $(window).width()
      $("html").css({fontSize: whei / 20})
      $(window).resize(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
      })
    },
    echarts_1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.echart1);

      var option = {
        //  backgroundColor: '#00265f',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '0%',
          top: '10px',
          right: '0%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['商超门店', '教育培训', '房地产', '生活服务', '汽车销售', '旅游酒店', '五金建材'],
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 1,
              type: "solid"
            },
          },

          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            // rotate:50,
            show: true,
            splitNumber: 15,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: '12',
            },
          },
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            //formatter: '{value} %'
            show: true,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: '12',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1	)",
              width: 1,
              type: "solid"
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          }
        }],
        series: [
          {
            type: 'bar',
            data: [200, 300, 300, 900, 1500, 1200, 600],
            barWidth: '35%', //柱子宽度
            // barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: '#2f89cf',
                opacity: 1,
                barBorderRadius: 5,
              }
            }
          }

        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    echarts_2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.echart2);

      let option = {
        //  backgroundColor: '#00265f',
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'shadow'}
        },
        grid: {
          left: '0%',
          top: '10px',
          right: '0%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 1,
              type: "solid"
            },
          },

          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            // rotate:50,
            show: true,
            splitNumber: 15,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: '12',
            },
          },
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            //formatter: '{value} %'
            show: true,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: '12',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1	)",
              width: 1,
              type: "solid"
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          }
        }],
        series: [
          {

            type: 'bar',
            data: [1500, 1200, 600, 200, 300, 300, 900],
            barWidth: '35%', //柱子宽度
            // barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: '#27d08a',
                opacity: 1,
                barBorderRadius: 5,
              }
            }
          }

        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    echarts_5() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.echart5);

      let option = {
        //  backgroundColor: '#00265f',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },

        grid: {
          left: '0%',
          top: '10px',
          right: '0%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽', '四川'],
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 1,
              type: "solid"
            },
          },

          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            // rotate:50,
            show: true,
            splitNumber: 15,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: '12',
            },
          },
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            //formatter: '{value} %'
            show: true,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: '12',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1	)",
              width: 1,
              type: "solid"
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          }
        }],
        series: [{
          type: 'bar',
          data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
          barWidth: '35%', //柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              color: '#2f89cf',
              opacity: 1,
              barBorderRadius: 5,
            }
          }
        }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    echarts_4() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.echart4);

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#dddc6b'
            }
          }
        },
        legend: {
          top: '0%',
          data: ['安卓', 'IOS'],
          textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12',
          }
        },
        grid: {
          left: '10',
          top: '30',
          right: '10',
          bottom: '10',
          containLabel: true
        },

        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)'
            }

          },

          data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']

        }, {

          axisPointer: {show: false},
          axisLine: {show: false},
          position: 'bottom',
          offset: 20,


        }],

        yAxis: [{
          type: 'value',
          axisTick: {show: false},
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },

          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          }
        }],
        series: [
          {
            name: '安卓',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {

              normal: {
                color: '#0184d5',
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(1, 132, 213, 0.4)'
                }, {
                  offset: 0.8,
                  color: 'rgba(1, 132, 213, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
              }
            },
            itemStyle: {
              normal: {
                color: '#0184d5',
                borderColor: 'rgba(221, 220, 107, .1)',
                borderWidth: 12
              }
            },
            data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4, 3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]

          },
          {
            name: 'IOS',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {

              normal: {
                color: '#00d887',
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 216, 135, 0.4)'
                }, {
                  offset: 0.8,
                  color: 'rgba(0, 216, 135, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
              }
            },
            itemStyle: {
              normal: {
                color: '#00d887',
                borderColor: 'rgba(221, 220, 107, .1)',
                borderWidth: 12
              }
            },
            data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]

          },

        ]

      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    echarts_6() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.echart6);

      let dataStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          //shadowBlur: 40,
          //shadowColor: 'rgba(40, 40, 40, 1)',
        }
      };
      let placeHolderStyle = {
        normal: {
          color: 'rgba(255,255,255,.05)',
          label: {show: false,},
          labelLine: {show: false}
        },
        emphasis: {
          color: 'rgba(0,0,0,0)'
        }
      };
      let option = {
        color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
        tooltip: {
          show: true,
          formatter: "{a} : {c} "
        },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 12,
          bottom: '3%',

          data: ['浙江', '上海', '广东', '北京', '深圳'],
          textStyle: {
            color: 'rgba(255,255,255,.6)',
          }
        },

        series: [
          {
            name: '浙江',
            type: 'pie',
            clockWise: false,
            center: ['50%', '42%'],
            radius: ['59%', '70%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            data: [{
              value: 80,
              name: '01'
            }, {
              value: 20,
              name: 'invisible',
              tooltip: {show: false},
              itemStyle: placeHolderStyle
            }]
          },
          {
            name: '上海',
            type: 'pie',
            clockWise: false,
            center: ['50%', '42%'],
            radius: ['49%', '60%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            data: [{
              value: 70,
              name: '02'
            }, {
              value: 30,
              name: 'invisible',
              tooltip: {show: false},
              itemStyle: placeHolderStyle
            }]
          },
          {
            name: '广东',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            center: ['50%', '42%'],
            radius: ['39%', '50%'],
            itemStyle: dataStyle,
            data: [{
              value: 65,
              name: '03'
            }, {
              value: 35,
              name: 'invisible',
              tooltip: {show: false},
              itemStyle: placeHolderStyle
            }]
          },
          {
            name: '北京',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            center: ['50%', '42%'],
            radius: ['29%', '40%'],
            itemStyle: dataStyle,
            data: [{
              value: 60,
              name: '04'
            }, {
              value: 40,
              name: 'invisible',
              tooltip: {show: false},
              itemStyle: placeHolderStyle
            }]
          },
          {
            name: '深圳',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            center: ['50%', '42%'],
            radius: ['20%', '30%'],
            itemStyle: dataStyle,
            data: [{
              value: 50,
              name: '05'
            }, {
              value: 50,
              name: 'invisible',
              tooltip: {show: false},
              itemStyle: placeHolderStyle
            }]
          },]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    echarts_31() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.fb1);
      let option = {

        title: [{
          text: '年龄分布',
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: '16'
          }

        }],
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          position: function (p) {   //其中p为当前鼠标的位置
            return [p[0] + 10, p[1] - 10];
          }
        },
        legend: {

          top: '70%',
          itemWidth: 10,
          itemHeight: 10,
          data: ['0岁以下', '20-29岁', '30-39岁', '40-49岁', '50岁以上'],
          textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12',
          }
        },
        series: [
          {
            name: '年龄分布',
            type: 'pie',
            center: ['50%', '42%'],
            radius: ['40%', '60%'],
            color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
            label: {show: false},
            labelLine: {show: false},
            data: [
              {value: 1, name: '0岁以下'},
              {value: 4, name: '20-29岁'},
              {value: 2, name: '30-39岁'},
              {value: 2, name: '40-49岁'},
              {value: 1, name: '50岁以上'},
            ]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    echarts_32() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.fb2);
      let option = {

        title: [{
          text: '补贴类型',
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: '16'
          }

        }],
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          position: function (p) {   //其中p为当前鼠标的位置
            return [p[0] + 10, p[1] - 10];
          }
        },
        legend: {

          top: '70%',
          itemWidth: 10,
          itemHeight: 10,
          data: ['养老服务津贴', '高龄津贴', '服务补贴'],
          textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12',
          }
        },
        series: [
          {
            name: '补贴类型',
            type: 'pie',
            center: ['50%', '42%'],
            radius: ['40%', '60%'],
            color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
            label: {show: false},
            labelLine: {show: false},
            data: [
              {value: 5, name: '养老服务津贴'},
              {value: 1, name: '高龄津贴'},
              {value: 6, name: '服务补贴'},

            ]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    echarts_33() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.fb3);
      let option = {
        title: [{
          text: '居住类型',
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: '16'
          }

        }],
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          position: function (p) {   //其中p为当前鼠标的位置
            return [p[0] + 10, p[1] - 10];
          }
        },
        legend: {
          top: '70%',
          itemWidth: 10,
          itemHeight: 10,
          data: ['常住人口', '户籍人口', '流动人口', '境外人口'],
          textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12',
          }
        },
        series: [
          {
            name: '居住类型',
            type: 'pie',
            center: ['50%', '42%'],
            radius: ['40%', '60%'],
            color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
            label: {show: false},
            labelLine: {show: false},
            data: [
              {value: 2, name: '常住人口'},
              {value: 3, name: '户籍人口'},
              {value: 1, name: '流动人口'},
              {value: 4, name: '境外人口'},
            ]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }

  }

}

let $=require('jquery');

</script>

<style scoped>
  @import url(../../assets/BigScreen/css/comon0.css);
</style>